<?php
// 开启会话，用于存储拨动念珠的总数
session_start();

// 初始化拨动总数，如果会话中不存在该值，则初始化为 0
if (!isset($_SESSION['bead_count'])) {
    $_SESSION['bead_count'] = 0;
}

// 处理拨动念珠的请求
if (isset($_POST['move_bead'])) {
    // 每次拨动增加的念珠数量，可根据需求调整
    $increment = 1; 
    $_SESSION['bead_count'] += $increment;
}
?>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>念珠游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f9f5eb;
        }

        h1 {
            color: #4d4d4d;
        }

        #beads-container {
            margin: 20px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bead {
            width: 30px;
            height: 30px;
            background-color: #b08968;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        #count-display {
            font-size: 24px;
            color: #6b7280;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>念珠游戏</h1>
    <div id="beads-container">
        <!-- 这里可以根据需要增加或减少念珠数量 -->
        <div class="bead" onclick="moveBead()"></div>
        <div class="bead" onclick="moveBead()"></div>
        <div class="bead" onclick="moveBead()"></div>
        <div class="bead" onclick="moveBead()"></div>
        <div class="bead" onclick="moveBead()"></div>
    </div>
    <p id="count-display">已拨动念珠总数: <?php echo $_SESSION['bead_count']; ?></p>

    <script>
        function moveBead() {
            // 发送 POST 请求更新拨动念珠的总数
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'index.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 更新页面上的拨动总数
                    const countElement = document.getElementById('count-display');
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(xhr.responseText, 'text/html');
                    const newCount = doc.getElementById('count-display').textContent;
                    countElement.textContent = newCount;
                }
            };
            xhr.send('move_bead=1');
        }
    </script>
</body>

</html>